import { View, Image } from '@tarojs/components';
import { showToast, navigateTo } from '@tarojs/taro';
import arrowImg from '@/static/images/icon/arrow-right.png';
import { ReactNode } from 'react';

interface IProps {
  domainList: Array<{
    name: string;
    icon: ReactNode;
    to: string;
    text: string;
    notice: number;
  }>;
  isLogin: boolean;
}
const Domain = (props: IProps) => {
  const { domainList, isLogin } = props;

  /**
   * 去功能区详细页面
   * @param url 页面路径
   */
  const toDetail = (url: string) => {
    if (!isLogin) {
      showToast({
        title: '请先登录！',
        icon: 'error',
      });
      return;
    }
    navigateTo({ url });
  };

  return (
    <View className='body'>
      {domainList.map((domain) => {
        return (
          <View
            key={domain.name}
            onClick={() => toDetail(domain.to)}
            className='domain-item'
          >
            {domain.icon}
            <View className='text'>{domain.text}</View>
            {domain.notice ? (
              <View className='badge'>{domain.notice}</View>
            ) : null}
            <Image src={arrowImg} className='arrow-icon' />
          </View>
        );
      })}
    </View>
  );
};

export default Domain;
